<template>
  <!-- vue3组件中的模板结构可以没有根标签 -->
  <h1>一个人的信息</h1>
  <!-- 模板中读取数据不用“.value” -->
  <h2>姓名:{{person.name}}</h2>
  <h2>年龄:{{person.age}}</h2>
  <h2>性别:{{person.sex}}</h2>
  <h2>爱好:{{person.hobby}}</h2>

  <button @click="changeInfo">尝试修改信息</button>
</template>

<script>
// import {h} from 'vue'
import { reactive } from "vue"
export default {
  name: 'App',
  // 注意:setup 不能用async 因为返回值不再是一个对象，而是promise，模板看不到return对象中的属性
  // 暂时不考虑响应式
  setup(){
    let person = reactive({
      name:'洪奇奇',
      age:18,
      sex:'男',
      job:{
        salary:'30k',
        work:'前端开发工程师'
      },
      hobby:['抽烟','喝酒','烫头']
    })
    console.log('修改前的person:',person)
    function changeInfo(){
      person.name = '洪奇奇2'
      person.age = 28
      person.job.salary = '48k'
      person.hobby[0] = '学习'
      console.log('修改后的person:',person)
    }

    // 1、返回一个对象
    return {
      person,
      changeInfo
    }
    // 2、返回一个渲染函数
    // 当返回一个渲染函数时，页面中其他东西都不会显示，只会显示渲染函数中返回的内容
    // return () => {return h('h2','加油学习')}
    // return () =>  h('h2','加油学习')

  }
}
</script>
